import bannerImg from "@/assets/Images/comImg/banner.png";
import { Col, Row } from "antd";
import { Link } from "react-router-dom";
import { comDataSource } from "./comDataSource";
import "./index.less";
const ProductComponent = () => {
  return (
    <div className="com-banner-wrap">
      <div className="com-banner-img">
        <img src={bannerImg} alt="配件图片" />
        <div className="com-banner-text">
          <div className="banner-title">配套组件</div>
          <div className="banner-content">
            Full range of supporting components
          </div>
        </div>
      </div>
      <div className="com-banner-detail">
        <div className="title">配件组件清单</div>
        <div className="detail-item">
          <Row gutter={[10, 16]}>
            {comDataSource.map((item) => {
              return (
                <Col md={6} xs={12} key={item.name}>
                  <Link to={item.name}>
                    <div className="col-box">
                      {item.children.map((key) => {
                        if (key.type === "img") {
                          return (
                            <img
                              src={key.content}
                              className={key.className}
                              key={item.name + key.type}
                              alt={"配件图片"}
                            />
                          );
                        } else {
                          return (
                            <div
                              key={item.name + key.type}
                              className={key.className}
                            >
                              {key.content}
                            </div>
                          );
                        }
                      })}
                    </div>
                  </Link>
                </Col>
              );
            })}
          </Row>
        </div>
      </div>
    </div>
  );
};
export default ProductComponent;
